<template>
 
<transition mode="out-in" :name="transitionName" >
<router-view></router-view>
</transition>
</template>


<script>
export default {
   data(){
    return {
      transitionName:"turn-on"
    }
  },
  watch:{
      '$route':function(to,from){
         if (parseInt(to.query._t) < parseInt(from.query._t)) {
              this.transitionName = 'turn-off';
          } else {
              this.transitionName = 'turn-on';
          }
      }
    },
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

@keyframes  turnon-enter{
      from{opacity: 0}
      to{opacity: 1}
  }
  @keyframes  turnon-leave{
      from{opacity: 1}
      to{opacity: 0}
  }

  @keyframes  turnoff-enter{
      from{opacity: 0}
      to{opacity: 1}
  }
  @keyframes  turnoff-leave{
      from{opacity: 1}
      to{opacity: 0}
  }

  .turn-on-enter-active{
    animation: turnon-enter .6s;
  }
  .turn-on-leave-active{
    animation: turnon-leave .6s;
  }

  .turn-off-enter-active{
    animation: turnoff-enter .6s;
  }
  .turn-off-leave-active{
    animation: turnoff-leave .6s;
  }

</style>
